import React, { Component, Fragment } from 'react';
import { connect } from 'dva'
import BaseTable from './baseTable'
import { Space, Popconfirm, Modal, Descriptions, Radio, Input, Select, Popover, message, Button } from 'antd'
import constant from '../../constant/constant'
const { Option } = Select;


class TechnologyExaminationTable extends BaseTable {
    constructor(props) {
        super(props),
            this.state = {
                column: [
                    { title: "技术编号", dataIndex: "id", key: "technologyName",...this.getColumnSearchProps("id") },
                    { title: "技术名称", dataIndex: "technologyName", key: "technologyName",...this.getColumnSearchProps("technologyName") },
                    { title: "上传日期", dataIndex: "createdAt", key: "createdAt" },
                    {
                        title: "资格审查", dataIndex: "technologyExamination", key: "technologyExamination",
                        render: (text, record, index) => {
                            return (
                                <Space key={index}>
                                    <a onClick={() => { this.searchTechnologyExaminationData(record.id) }}>查看</a>
                                    {this.renderTechnologyExaminationStatus(record.id, 1)}
                                </Space>
                            )
                        }
                    },
                    {
                        title: "测试报告", dataIndex: "testReport", key: "testReport",
                        render: (text, record, index) => {
                            return (
                                <Space key={index}>
                                    {record.testReport ? <a href={constant.serverUrl + constant.fileUrl.mechanismUrl + record.testReport}>下载</a> : "暂未上传"}
                                    {this.renderTechnologyExaminationStatus(record.id, 3)}
                                </Space>
                            )
                        }
                    },
                    {
                        title: "验证报告", dataIndex: "verificationReport", key: "verificationReport",
                        render: (text, record, index) => {
                            return (
                                <Space key={index}>
                                    {record.verificationReport ? <a href={constant.serverUrl + constant.fileUrl.mechanismUrl + record.verificationReport}>下载</a> : "暂未上传"} 
                                    {this.renderTechnologyExaminationStatus(record.id, 2)}
                                </Space>
                            )
                        }
                    },
                    {
                        title: "验证声明", dataIndex: "verificationStatement", key: "verificationStatement",
                        render: (text, record, index) => {
                            return (
                                <Space key={index}>
                                    {record.verificationStatement ? <a href={constant.serverUrl + constant.fileUrl.mechanismUrl + record.verificationStatement}>下载</a> : "暂未上传"}
                                    {this.renderTechnologyExaminationStatus(record.id, 4)}
                                </Space>
                            )
                        }
                    }
                ],
                isTechnologyExaminationModalVisible: false,
                isTestReportModalVisible: false,
                isVerificationReportModalVisible: false,
                isVerificationStatementModalVisible:false,
                radioValue: -1,
                reason: "",
                testReportRadioValue: -1,
                testReportReason: "",
                verificationReportRadioValue: -1,
                verificationReportReason: "",
                verificationStatementRadioValue:-1,
                verificationStatementReason:"",
                technologyInformation: {},
                technologyExaminationStatus: "",
                technologyExamination: {
                    id: "",
                    userId: "",
                    examinationType: "",
                    examinationStatus: "",
                    reason: "",
                    verificationMechanismId: "",
                    testMechanismId: ""
                },
                testReport: {
                    id: "",
                    userId: "",
                    examinationType: "",
                    examinationStatus: "",
                    reason: ""
                },
                verificationReport: {
                    id: "",
                    userId: "",
                    examinationType: "",
                    examinationStatus: "",
                    reason: ""
                },
                verificationStatement: {
                    id: "",
                    userId: "",
                    examinationType: "",
                    examinationStatus: "",
                    reason: ""
                }
            }
    }

    componentDidMount() {
        this.props.dispatch({
            type: "examination/getTechnologyExaminationTableData"
        })

        this.props.dispatch({
            type: "examination/getMechanismList"
        })
    }

    searchTechnologyExaminationData = id => {
        this.setState({
            isTechnologyExaminationModalVisible: true
        })

        let _technologyExamination = JSON.parse(JSON.stringify(this.state.technologyExamination));
        _technologyExamination.id = id
        this.setState({
            technologyExamination: _technologyExamination
        })
        for (let i = 0; i < this.props.dataSource.length; i++) {
            if (this.props.dataSource[i].id == id) {
                for(let j = 0; j < this.props.dataSource[i].TechnologyExamination.length;j++){
                    if(this.props.dataSource[i].TechnologyExamination[j].examinationType == 1){
                        this.setState({
                            technologyInformation: this.props.dataSource[i].technologyInformation,
                            technologyExaminationStatus: this.props.dataSource[i].TechnologyExamination[j].examinationStatus
                        })
                    }
                }
                
            }
        }
    }

    /**
     * 渲染各项审核状态
     */
    renderTechnologyExaminationStatus = (id, type) => {
        for (let i = 0; i < this.props.dataSource.length; i++) {
            if (this.props.dataSource[i].id == id) {
                if (this.props.dataSource[i].TechnologyExamination instanceof Array) {
                    for (let j = 0; j < this.props.dataSource[i].TechnologyExamination.length; j++) {
                        if (this.props.dataSource[i].TechnologyExamination[j].examinationType == type) {
                            if (this.props.dataSource[i].TechnologyExamination[j].examinationStatus == 0) {
                                return (
                                    <Popover content={this.props.dataSource[i].TechnologyExamination[j].reason}>
                                        <a>审核未通过</a>
                                    </Popover>
                                )
                            }

                            if (this.props.dataSource[i].TechnologyExamination[j].examinationStatus == 1) {
                                if (type == 1) {
                                    return (
                                        <a>待审核</a>
                                    )
                                }

                                if (type == 2) {
                                    return (
                                        <Space>
                                            <a>待审核</a>
                                            <a onClick={() => { this.handleVerificationReportOk(id) }}>审核</a>
                                        </Space>
                                    )
                                }

                                if (type == 3) {
                                    return (
                                        <Space>
                                            <a>待审核</a>
                                            <a onClick={() => { this.handleTestReportOk(id) }}>审核</a>
                                        </Space>
                                    )
                                }

                                if (type == 4) {
                                    return (
                                        <Space>
                                            <a>待审核</a>
                                            <a onClick={() => { this.handleVerificationStatementOk(id) }}>审核</a>
                                        </Space>
                                    )
                                }

                            }

                            if (this.props.dataSource[i].TechnologyExamination[j].examinationStatus == 2) {
                                return (<a>审核通过</a>)
                            }
                        }
                    }
                }
                if (this.props.dataSource[i].TechnologyExamination instanceof Object) {
                    if (this.props.dataSource[i].TechnologyExamination.examinationType == type) {
                        if (this.props.dataSource[i].TechnologyExamination.examinationStatus == 0) {
                            return (
                                <Popover content={this.props.dataSource[i].TechnologyExamination.reason}>
                                    <a>审核未通过</a>
                                </Popover>
                            )
                        }

                        if (this.props.dataSource[i].TechnologyExamination.examinationStatus == 1) {
                            return (<a>待审核</a>)
                        }

                        if (this.props.dataSource[i].TechnologyExamination.examinationStatus == 2) {
                            return (<a>审核通过</a>)
                        }
                    }
                }
            }
        }
    }

    changeTestReportRadioValue = e => {
        this.setState({
            testReportRadioValue: e.target.value
        })
    }

    changeVerificationReportRadioValue = e => {
        this.setState({
            verificationReportRadioValue: e.target.value
        })
    }

    changeVerificationStatementRadioValue = e => {
        this.setState({
            verificationStatementRadioValue:e.target.value
        })
    }

    changeRadioValue = e => {
        this.setState({
            radioValue: e.target.value
        })
    }

    handleTestReportOk = id => {
        let _testReport = JSON.parse(JSON.stringify(this.state.testReport));
        _testReport.id = id
        this.setState({
            isTestReportModalVisible: true,
            testReport: _testReport
        })
    }

    handleVerificationReportOk = id => {
        let _verificationReport = JSON.parse(JSON.stringify(this.state.verificationReport))
        _verificationReport.id = id;
        this.setState({
            isVerificationReportModalVisible: true,
            verificationReport: _verificationReport
        })
    }

    handleVerificationStatementOk = id => {
        let _verificationStatement = JSON.parse(JSON.stringify(this.state.verificationStatement))
        _verificationStatement.id = id
        this.setState({
            isVerificationStatementModalVisible:true,
            verificationStatement:_verificationStatement
        })
    }

    handleTestReportCancel = () => {
        this.setState({
            isTestReportModalVisible: false,
            testReportRadioValue: -1
        })
    }

    handleVerificationReportCancel = () => {
        this.setState({
            isVerificationReportModalVisible: false,
            verificationReportRadioValue: -1
        })
    }

    handleVerificationStatementCancel = () =>{
        this.setState({
            isVerificationStatementModalVisible:false,
            verificationStatementRadioValue:-1
        })
    }

    setVerificationMechanismId = e => {
        let _technologyExamination = JSON.parse(JSON.stringify(this.state.technologyExamination));
        _technologyExamination.verificationMechanismId = e
        _technologyExamination.examinationStatus = 2
        this.setState({
            technologyExamination: _technologyExamination
        })
    }

    setTestMechanismId = e => {
        let _technologyExamination = JSON.parse(JSON.stringify(this.state.technologyExamination));
        _technologyExamination.testMechanismId = e
        _technologyExamination.examinationStatus = 2
        this.setState({
            technologyExamination: _technologyExamination
        })
    }

    setTestReportReason = e => {
        let _testReport = JSON.parse(JSON.stringify(this.state.testReport));
        _testReport.reason = e.target.value
        _testReport.examinationStatus = 0
        this.setState({
            testReport: _testReport
        })
    }

    setReason = e => {
        let _technologyExamination = JSON.parse(JSON.stringify(this.state.technologyExamination));
        _technologyExamination.reason = e.target.value
        _technologyExamination.examinationStatus = 0
        this.setState({
            technologyExamination: _technologyExamination
        })
    }

    setVerificationReportReason = e => {
        let _verificationReport = JSON.parse(JSON.stringify(this.state.verificationReport));
        _verificationReport.reason = e.target.value
        _verificationReport.examinationStatus = 0
        this.setState({
            verificationReport:_verificationReport
        })
    }

    setVerificationStatementReason = e => {
        let _verificationStatement = JSON.parse(JSON.stringify(this.state.verificationStatement));
        _verificationStatement.reason = e.target.value
        _verificationStatement.examinationStatus = 0
        this.setState({
            verificationStatement:_verificationStatement
        })
    }

    handleTechnologyExaminationOk = () => {
        if(this.state.technologyExamination.testMechanismId == "" || this.state.technologyExamination.verificationMechanismId == ""){
            message.error("请分配验证机构及测试机构！")
            return
        }
        this.state.technologyExamination.userId = this.props.user.id
        this.state.technologyExamination.examinationType = 1
        this.props.dispatch({
            type: "examination/updateExamination",
            data: this.state.technologyExamination
        })

        this.setState({
            isTechnologyExaminationModalVisible: false,
            examinationStatus: this.state.technologyExamination.examinationStatus,
            radioValue: -1
        })

        this.props.dispatch({
            type: "examination/getTechnologyExaminationTableData"
        })
    }

    handleTechnologyExaminationCancel = () => {
        this.setState({
            isTechnologyExaminationModalVisible: false,
            radioValue: -1,
            technologyExamination: {
                id: "",
                userId: "",
                examinationType: "",
                examinationStatus: "",
                reason: "",
                verificationMechanismId: "",
                testMechanismId: ""
            }
        })
    }


    handleTestReport = () => {
        this.state.testReport.userId = this.props.user.id
        this.state.testReport.examinationType = 3
        this.state.testReport.examinationStatus = this.state.testReportRadioValue
        this.props.dispatch({
            type: "examination/updateFileExamination",
            data: this.state.testReport
        })

        this.setState({
            isTestReportModalVisible: false,
            testReportRadioValue: -1
        })

        this.props.dispatch({
            type: "examination/getTechnologyExaminationTableData"
        })
    }

    handleVerificationReport = () => {
        this.state.verificationReport.userId = this.props.user.id
        this.state.verificationReport.examinationType = 2
        this.state.verificationReport.examinationStatus = this.state.verificationReportRadioValue
        this.props.dispatch({
            type: "examination/updateFileExamination",
            data: this.state.verificationReport
        })

        this.setState({
            isVerificationReportModalVisible:false,
            verificationReportRadioValue:-1
        })

        this.props.dispatch({
            type: "examination/getTechnologyExaminationTableData"
        })
    }

    handleVerificationStatement = () => {
        this.state.verificationStatement.userId = this.props.user.id
        this.state.verificationStatement.examinationType = 4
        this.state.verificationStatement.examinationStatus = this.state.verificationStatementRadioValue
        this.props.dispatch({
            type: "examination/updateFileExamination",
            data: this.state.verificationStatement
        })

        this.setState({
            isVerificationStatementModalVisible:false,
            verificationStatementRadioValue:-1
        })

        this.props.dispatch({
            type: "examination/getTechnologyExaminationTableData"
        })
    }

    render() {
        return (
            <Fragment>
                <Modal
                    title="技术详情"
                    width={1000}
                    visible={this.state.isTechnologyExaminationModalVisible}
                    footer={null}
                    onOk={this.handleTechnologyExaminationCancel}
                    onCancel={this.handleTechnologyExaminationCancel}>
                    <Descriptions>
                        <Descriptions.Item label="单位全称">{this.state.technologyInformation.companyName}</Descriptions.Item>
                        <Descriptions.Item label="单位性质">{this.state.technologyInformation.companyNature}</Descriptions.Item>
                        <Descriptions.Item label="地址">{this.state.technologyInformation.companyAddress}</Descriptions.Item>
                        <Descriptions.Item label="邮政编码">{this.state.technologyInformation.postalCode}</Descriptions.Item>
                        <Descriptions.Item label="法人代表">{this.state.technologyInformation.legalRepresentative}</Descriptions.Item>
                        <Descriptions.Item label="统一社会信用代码">{this.state.technologyInformation.socialCreditCode}</Descriptions.Item>
                        <Descriptions.Item label="联系人">{this.state.technologyInformation.contacts}</Descriptions.Item>
                        <Descriptions.Item label="联系方式">{this.state.technologyInformation.phone}</Descriptions.Item>
                        <Descriptions.Item label="身份证号码">{this.state.technologyInformation.idNumber}</Descriptions.Item>
                        <Descriptions.Item label="邮箱">{this.state.technologyInformation.email}</Descriptions.Item>
                        <Descriptions.Item label="技术名称">{this.state.technologyInformation.technologyName}</Descriptions.Item>
                        <Descriptions.Item label="技术目的">{this.state.technologyInformation.technologyTarget}</Descriptions.Item>
                        <Descriptions.Item label="技术原理">{this.state.technologyInformation.technologyPrinciple}</Descriptions.Item>
                        <Descriptions.Item label="技术的相关代替方案">{this.state.technologyInformation.technologyAlternatives}</Descriptions.Item>
                        <Descriptions.Item label="技术操作条件">{this.state.technologyInformation.operatingConditions}</Descriptions.Item>
                        <Descriptions.Item label="创新的描述">{this.state.technologyInformation.innovationDescription}</Descriptions.Item>
                        <Descriptions.Item label="相同或相似的技术验证">{this.state.technologyInformation.RepeatId ? this.state.technologyInformation.RepeatId : "无"}</Descriptions.Item>
                        <Descriptions.Item label="技术是否符合目标市场的法规要求">{this.state.technologyInformation.isStatue}</Descriptions.Item>
                        <Descriptions.Item label="目标市场设计的法律规章">{<a href={constant.serverUrl + constant.fileUrl.applicationUrl + this.state.technologyInformation.regulation}>{this.state.technologyInformation.regulation}</a>}</Descriptions.Item>
                        <Descriptions.Item label="目标市场设计的技术标准">{<a href={constant.serverUrl + constant.fileUrl.applicationUrl + this.state.technologyInformation.technicalStandard}>{this.state.technologyInformation.technicalStandard}</a>}</Descriptions.Item>
                        <Descriptions.Item label="适用于本技术的参考资料">{<a href={constant.serverUrl + constant.fileUrl.applicationUrl + this.state.technologyInformation.referenceMaterial}>{this.state.technologyInformation.referenceMaterial}</a>}</Descriptions.Item>
                    </Descriptions>
                    {this.renderExaminationRadio(this.state.technologyExaminationStatus)}
                    {this.renderRadioPage(this.state.radioValue)}
                    {this.renderButton(this.state.technologyExaminationStatus)}
                </Modal>
                <Modal
                    title="测试报告审核"
                    visible={this.state.isTestReportModalVisible}
                    onOk={this.handleTestReport}
                    onCancel={this.handleTestReportCancel}
                >
                    <Radio.Group onChange={this.changeTestReportRadioValue}>
                        <Radio value={0}>不通过</Radio>
                        <Radio value={2}>通过</Radio>
                    </Radio.Group>
                    {this.renderTestReportRadioPage(this.state.testReportRadioValue)}
                </Modal>
                <Modal
                    title="验证报告审核"
                    visible={this.state.isVerificationReportModalVisible}
                    onOk={this.handleVerificationReport}
                    onCancel={this.handleVerificationReportCancel}
                >
                    <Radio.Group onChange={this.changeVerificationReportRadioValue}>
                        <Radio value={0}>不通过</Radio>
                        <Radio value={2}>通过</Radio>
                    </Radio.Group>
                    {this.renderVerificationReportRadioPage(this.state.verificationReportRadioValue)}
                </Modal>
                <Modal
                    title="验证声明审核"
                    visible={this.state.isVerificationStatementModalVisible}
                    onOk={this.handleVerificationStatement}
                    onCancel={this.handleVerificationStatementCancel}
                >
                    <Radio.Group onChange={this.changeVerificationStatementRadioValue}>
                        <Radio value={0}>不通过</Radio>
                        <Radio value={2}>通过</Radio>
                    </Radio.Group>
                    {this.renderVerificationStatementRadioPage(this.state.verificationReportRadioValue)}
                </Modal>
                {super.render(this.state.column, this.props.dataSource,{pageSize:12})}
            </Fragment>
        )
    }

    renderExaminationRadio = status => {
        if (status == 1) {
            return (
                <Fragment>
                    <Radio.Group onChange={this.changeRadioValue}>
                        <Radio value={0}>不通过</Radio>
                        <Radio value={2}>通过</Radio>
                    </Radio.Group>
                </Fragment>
            )
        }
    }

    renderVerificationStatementRadioPage = r => {
        if (r == -1) {
            return
        }

        if (r == 0) {
            return (
                <Fragment>
                    <Space><p>不通过原因：<Input style={{ width: 300, marginTop: 10 }} onChange={this.setVerificationStatementReason}></Input></p></Space>
                </Fragment>
            )
        }
    }

    renderVerificationReportRadioPage = r => {
        if (r == -1) {
            return
        }

        if (r == 0) {
            return (
                <Fragment>
                    <Space><p>不通过原因：<Input style={{ width: 300, marginTop: 10 }} onChange={this.setVerificationReportReason}></Input></p></Space>
                </Fragment>
            )
        }
    }

    renderTestReportRadioPage = r => {
        if (r == -1) {
            return
        }

        if (r == 0) {
            return (
                <Fragment>
                    <Space><p>不通过原因：<Input style={{ width: 300, marginTop: 10 }} onChange={this.setTestReportReason}></Input></p></Space>
                </Fragment>
            )
        }
    }

    renderRadioPage = r => {
        if (r == -1) {
            return
        }

        if (r == 0) {
            return (
                <Fragment>
                    <Space><p>不通过原因：<Input style={{ width: 500 }} onChange={this.setReason}></Input></p></Space>
                </Fragment>
            )
        }

        if (r == 2) {
            return (
                <Space>
                    <p>请分配验证机构：
                        <Select style={{ width: 270 }} onSelect={this.setVerificationMechanismId}>
                            {this.props.mechanismData.map((item, index) => {
                                if (item.mechanismType == "验证机构" && item.MechanismExamination.examinationStatus == 2) {
                                    return (
                                        <Option value={item.id}>{item.mechanismName}</Option>
                                    )
                                }
                            })}
                        </Select>
                    </p>
                    <p>请分配测试机构：
                        <Select style={{ width: 270 }} onSelect={this.setTestMechanismId}>
                            {this.props.mechanismData.map((item, index) => {
                                if (item.mechanismType == "测试机构" && item.MechanismExamination.examinationStatus == 2) {
                                    return (
                                        <Option value={item.id}>{item.mechanismName}</Option>
                                    )
                                }
                            })}
                        </Select>
                    </p>
                </Space>
            )
        }
    }

    renderButton = status => {
        if (status == 1) {
            return (
                <div style={{ marginTop: 10 }}><Button onClick={this.handleTechnologyExaminationOk} type='primary'>提交</Button></div>
            )
        }
    }
}



const mapStateToProps = state => {
    let dataSource = state.examination.technologyExaminationTableData
    let mechanismData = state.examination.mechanismList
    let user = state.app.user
    return {
        dataSource,
        mechanismData,
        user
    }
}

export default connect(mapStateToProps)(TechnologyExaminationTable)